<template>
  <view class="myLogin">
    <u-cell-group :border="false" :customStyle="{ 'margin-bottom': '20px' }">
      <u-cell
        title="账号登录"
        :border="false"
        :titleStyle="{ 'font-weight': 600, 'font-size': '24px' }"
        :isLink="true"
      >
        <navigator
          slot="value"
          class="u-slot-value"
          url="/pages/login-phone/login-phone"
          >手机号登录</navigator
        >
        <u-icon
          slot="right-icon"
          name="play-right-fill"
          color="#EF4F3F"
          size="10"
        ></u-icon>
      </u-cell>
    </u-cell-group>
    <u--form
      labelPosition="left"
      :model="form"
      ref="uForm"
      class="form"
      :rules="rules"
    >
      <u-form-item prop="account" borderBottom ref="item1">
        <u--input
          v-model="form.account"
          border="none"
          placeholder="请输入账号"
        ></u--input>
        <u-icon
          slot="right"
          class="input-del"
          name="close-circle-fill"
          color="#CCCCCC"
          size="14"
        ></u-icon>
      </u-form-item>

      <u-form-item prop="password" borderBottom ref="item2">
        <u--input
          v-model="form.password"
          border="none"
          :type="passwordType ? 'password' : 'number'"
          placeholder="请输入密码"
        >
        </u--input>
        <view slot="right" class="input-icon">
          <u-icon
            class="input-del"
            name="close-circle-fill"
            :name="passwordType ? 'eye-off' : 'eye-fill'"
            @click="changeType"
            color="#CCCCCC"
            size="14"
          ></u-icon>
        </view>
      </u-form-item>
    </u--form>

    <u-button
      type="error"
      shape="circle"
      text="登录"
      @click="goToLogin"
    ></u-button>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "",
  components: {},
  data() {
    return {
      passwordType: true,
      form: {
        account: "hbsj002",
        password: "123456",
      },
      rules: {
        password: [
          { required: true, trigger: "blur", message: "密码必填" },
          {
            min: 6,
            max: 16,
            message: "密码的长度在6-16位之间 ",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["token"]),
  },

  async created() {},
  mounted() {},
  onLoad() {},

  methods: {
    async goToLogin() {
      let res = await uni.$http.post("/login/account", {
        account: this.form.account,
        password: this.form.password,
      });
      console.log(res);
      console.log(res.data.data);
      if (res.data.code === 200) {
        this.token = res.data.data;
        uni.showToast({
          title: "登录成功",
          icon: "success",
          duration: 1500,
        });
        this.$store.commit("setToken", res.data.data);
        uni.navigateTo({
          url: "/pages/message/message",
        });
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "error",
          duration: 1500,
        });
      }
    },
    changeType() {
      this.passwordType = !this.passwordType;
    },
  },
};
</script>

<style lang="scss">
.u-slot-value {
  color: #ef4f3f;
  font-weight: 500;
  font-size: 16px;
}

::v-deep .u-cell__body {
  padding: 20px 0 !important;
}

::v-deep .u-icon__icon.uicon-close-circle-fill {
  display: none !important;
}

.myLogin {
  padding: 33px;
}

.form {
  margin-bottom: 50px;
}

.input-icon {
  width: 35px;
  display: flex;
  justify-content: space-between;
}
</style>
